<template>
  <div class='category-wrapper'>
    <div class='category-div'>
      <type :tree-data="treeData" float></type>
      <div class='tags'>
        <div class="tag" @click="$router.push('/')">商城首页</div>
        <div class="tag tag-c" @click="$router.push('/demand/list')">需求大厅</div>
<!--        <div class="tag" @click="toJump">智能合规</div>-->

      </div>
    </div>
    <a-breadcrumb class="bread" v-if="!isList">
      <a-breadcrumb-item href="" @click="$router.push('/demand/list')">需求大厅</a-breadcrumb-item>
      <a-breadcrumb-item>需求详情</a-breadcrumb-item>
<!--      <div class="tag" @click="toJump">智能合规</div>-->

    </a-breadcrumb>
  </div>
</template>

<script>
  import {queryGoodsType} from '@/api/goods/type'
  import Type from '@/components/Type'
  export default {
    name: 'bread',
    components: { Type },
    props:{
      isList:{
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        treeData: []
      }
    },
    created() {
      this.loadTypeList()
    },
    methods:{
      toJump() {
      // const url = `https://www.baidu.com?userToken=${userToken}`
      const url = 'https://dthg.szdex.com:30921/home?userToken=${userToken}'

      // https://合规系统url?userToken=${userToken}
      window.open(url, '_self', 'noopener=yes,noreferrer=yes')

    },
      async loadTypeList () {
        let res = await queryGoodsType()
        let { data } = res || {}
        let list = data.filter(i => i.level === 2) || []
        list.map(v=>v.children = data.filter(i => i.parentId === v.id))
        this.treeData = list
      },
      generateTreeData (list) {
        // 展示第二级分类
        let temp = list.filter(item => item.level === 2)
        for (let i = 0; i < temp.length; i++) {
          temp[i].children = list.filter(item => item.parentId === temp[i].id)
          temp[i].children.sort((a, b) => a.sort - b.sort)
        }
        return temp.filter(item => item.children && item.children.length > 0)
      },
    }
  }
</script>

<style scoped lang="scss">
$width: 1200px;
$mainColor: #0078FE;
.category-wrapper {
  // background: #FAFAFA;
  width: 100%;
  height: 46px;
  margin-bottom: 20px;
}
.bread{
  width: $width;
  margin: 15px auto;
}
.category-div {
  width: $width;
  margin: 0 auto;
  display: flex;
}
.category-header {
  width: 280px;
  height: 46px;
  line-height: 46px;
  padding-left: 20px;
  border-radius: 10px 10px 0 0;
  background-image: linear-gradient(to left, #58A5FF, #0078FE);
  font-size: 16px;
  color: white;
  font-family: PingFangSC-Semibold, sans-serif;
  cursor: pointer;
}
.tags{
  width: 100%;
  height: 40px;
  display: flex;
  align-self: end;
  margin-left: 16px;
  border-bottom: 1px solid #ddd;
}
.tag{
  font-size: 16px;
  font-weight: 700;
  padding: 0 25px;
  line-height: 40px;
  cursor: pointer;
}
.tag-c{
  background-color: #0f7cf6;
  color: #fff;
  border-radius: 6px 6px 0 0;
}
.tag-check{
  position: relative;
  &::after{
    content: '';
    height: 6px;
    display: block;
    margin: -18px -6px 0px;
    border-radius: 10px;
    background-image: linear-gradient(to right, #037afa , #9ee389);
  }
}


</style>
